<template>
    <div>
        <h4>发表评论
                <!-- {{newsid}} 获取父组件传过来的id-->
        </h4>
        <hr>
        <textarea placeholder="打撒所大(最多120字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>
        <mt-button type="danger" size="large" plain @click="loadMore()">加载更多</mt-button>

        <!-- 评论列表区域 -->
        <div class="cmt-list">
            <div class="cmt-item">
            <!-- <div class="cmt-item" v-for="(item, index) in list" :key="index"> -->
                <div class="cmt-item-title">第一楼 &nbsp;  </div>
                <!-- <div class="cmt-item-title">第{{index+1}}楼 &nbsp; 用户：{{item.user_name}}} </div> -->
                <div class="ctm-item-body">好好学习,天天向上</div>
            </div>
        </div>
    </div>
</template>

<script>
// 按需从mint-ui中导出需要的弹框组件
import {Toast} from "mint-ui"
export default {
    data() {
        return {
            list:[],
            // page:1
            msg:'' //即将发表评论的内容
        }
    },
    methods: {
        async getCommentByPage(){
            // 根据页数来获取评论的数据
           const {data} =await this.$http.get("api")
        //    const {data} =await this.$http.get("api"+this.newsid+"?pageindex"+this.page)
           if(data.status===0)return (this.list=this.list.concat(data.message))
        },
        loadMore(){
            // 点击按钮，加载更多的评论
            // page++
            // this.getCommentByPage()
        },
      async  postMsg(){
            // 点击发表评论
            // 如果用户没有填写内容则不允许发表内容
            if(this.msg.trim().length<=0) Toast("请填写内容")
            // 发表评论的逻辑
        const {data}  =await this.$http.post("api",{content:this.msg.trim()})
            // this.$http.post("api"+this.newsid,)
            if(data.status===0){
                // 刷新评论列表
                // 1:再次调用getCommentByPage
                    // this.list=[]
                // this.getCommentByPage()
                this.list.unshift({user_name:"匿名用户",add_time:new Date(),content:this.msg.trim()})
                this.msg=""
            }
        }
    },
    created() {
        this.getCommentByPage()
    },
    // 接收父组件传过来的属性id
    props:["newsid"]
}
</script>

<style lang="less" scoped>

</style>